import React, { useState, useEffect, useRef } from 'react'
import './today.scss'
function today() {

  const [transformValue, setTransformValue] = useState(0);
  const containerRef = useRef(null);

  const moveLeft = () => {
    const newTransform = Math.max(transformValue - 830, -(containerRef.current.childElementCount * 830));
    setTransformValue(newTransform);
  };

  const moveRight = () => {
    const newTransform = Math.min(transformValue + 830, 0);
    setTransformValue(newTransform);
  };

  useEffect(() => {
    containerRef.current.style.transform = `translateX(${transformValue}px)`;
  }, [transformValue]);



  const [index, setIndex] = useState(0);
  const wrapperRef = useRef(null);

  useEffect(() => {
    const handleMouseMove = (event: { clientX: any; }) => {
      const x = event.clientX;
      if (x > window.innerWidth / 2) {
        // 向左滑动
        setIndex(prevIndex => prevIndex + 1);
      } else {
        // 向右滑动
        setIndex(prevIndex => prevIndex - 1);
      }
    };

    const handleMouseLeave = () => {
      setIndex(0);
    };

    if (wrapperRef.current) {
      wrapperRef.current.addEventListener('mousemove', handleMouseMove);
      wrapperRef.current.addEventListener('mouseleave', handleMouseLeave);
    }

    return () => {
      if (wrapperRef.current) {
        wrapperRef.current.removeEventListener('mousemove', handleMouseMove);
        wrapperRef.current.removeEventListener('mouseleave', handleMouseLeave);
      }
    };
  }, []);

  const images = [
    "../../../src/assets/img/wallhaven-731g73.webp",
    "../../../src/assets/img/wallhaven-ex8j2k.webp",
    "../../../src/assets/img/wallhaven-g7dr7l.webp",
    "../../../src/assets/img/wallhaven-l3my9p.webp",
    "../../../src/assets/img/wallhaven-zyge7y.webp"
  ];

  const imageWidth = 300; // 假设每张图片的宽度为300px


  //视频处理
  const videoRef = useRef(null);

  useEffect(() => {
    if (videoRef.current) {
      // 当组件挂载后开始播放视频
      videoRef.current.play();
    }

    return () => {
      if (videoRef.current) {
        // 清理工作：当组件卸载时停止视频播放
        videoRef.current.pause();
      }
    };
  }, []);

  return (
    <div className='box'>
      <div className='tui'>
        {/* 页面标题 */}
        <div className='mall-ti'>
          <h2>今日推荐</h2>  &nbsp;&nbsp;&nbsp;&nbsp;
          <span className='kai'>开通会员免费用</span>
        </div>
        <div className='mall-tabs'>
          {/* <a href="//store.eqxiu.com/moban/yaoqinghan-97041.html?ab_test_v=2" _tracker_click="_tracker_click">精选推荐</a> */}
          <a href="">精选推荐</a>
          <a href="">热点关注</a>
          <a href="">暑假</a>
          <a href="">大暑</a>
          <a href="">奥运会</a>
          <a href="">建军节</a>
          <a href="">立秋</a>
          <a href="">七夕节</a>
        </div>
        <div className='geng'>
          <span className='duo'> 查看更多<i className="iconfont icon-arrow-right"></i></span>
        </div>
      </div>
      <div className='tu'>
        <div className='template'>
          <div className='template-create'>
            <div className='kong'>
              <div className='kong1'>
                <i className='iconfont icon-tianjia'></i>
              </div>
              <div className='kong2'>空白创建</div>
            </div>
          </div>
          <div className='template-create-img'>
            <img src="../../../src/assets/img/2024.webp" className='create-img' alt="" />
          </div>
        </div>
        <div className="swiper-container">
          <div className='template-swiper' ref={containerRef}>
            <div ref={wrapperRef} className="template-swiper1">
              <div className="swiper-wrapper"
                style={{ transform: `translateX(-${index * imageWidth}px)` }}>
                {images.map((src, i) => (
                  <img key={i} src={src} alt={`Image ${i + 1}`} />
                ))}
              </div>
            </div>
            <div className='template-swiper2'></div>
            <div className='template-swiper3'></div>
            <div className='template-swiper4'></div>
            <div className='template-swiper5'>
              <video width="185" height="280" controls>
                {/* 假设你的视频文件位于 public 目录下的 videos 文件夹内 */}
                <source src="../../../src/assets/videos/fb45096162054c47a8c0367d73edcdd1.mp4" type="video/mp4" />
                {/* <source src="/videos/movie.ogg" type="video/ogg" /> */}
                
                {/* 如果浏览器不支持 video 标签，这里会显示文本 */}
                Your browser does not support the video tag.

              </video>
            </div>
            <div className='template-swiper6'></div>
            <div className='template-swiper7'></div>
            <div className='template-swiper8'></div>
            <div className='template-swiper9'></div>
            <div className='template-swiper10'></div>
            <div className='template-swiper11'></div>
            <div className='template-swiper12'></div>
            <div className='template-swiper13'></div>
            <div className='template-swiper14'></div>

          </div>
          <button className="prev-button" onClick={moveRight}><i className='iconfont icon-zuo'></i></button>
          <button className="next-button" onClick={moveLeft}> <i className='iconfont icon-arrow-right'></i></button>
        </div>
      </div>
      <div className='fixed'>
        <div className='fixe'>
          <div className='collection'><i className='iconfont icon-shoucang'></i> 收藏</div>
          <div className='member'> <i className='iconfont icon-huiyuanjifen'></i>会员</div>
          <div className='procurement'>企业采购</div>
          <div className='devise'>定制设计</div>
          <div className='Help'> <i className='iconfont icon-bangzhu'></i>帮助</div>
          <div className='Customer'> <i className='iconfont icon-kefu'></i>客服</div>
          <div className='opinion'> <i className='iconfont icon-yijianfankui'></i>意见</div>
          <div className='Top'> <i className='iconfont icon-zhiding'></i>置顶</div>
        </div>
      </div>
    </div>
  )
}
export default today

